<!DOCTYPE html>
<html lang="en">

<head>
    <title>Unit test for tinyform.data.js</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        var win = window;
    </script>
    <!--<script src="../node_modules/jquery/dist/jquery.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="../src/tinyform.core.js"></script>
    <script src="../src/tinyform.data.js"></script>
    <link href="../node_modules/qunitjs/qunit/qunit.css" rel="stylesheet">
</head>

<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="container">
    <form id="form">
        <ol>
            <li>
                <label>文本框</label>
                <input type="text" name="text">
            </li>
            <li>
                <label>单选按钮</label>
                <input type="radio" name="radio" value="radio1"> radio1

                <input type="radio" name="radio" value="radio2"> radio2
            </li>
            <li>
                <label>复选框</label>
                <input type="checkbox" name="checkbox">
            </li>
            <li>
                <label>自定义值的复选框</label>
                <input type="checkbox" name="checkbox-custom" data-checkbox="yes|no">
            </li>
            <li>
                <label>下拉框(单选)</label>
                <select name="select1">
                    <option value="1">第1项</option>
                    <option value="2">第2项</option>
                    <option value="3">第3项</option>
                </select>
            </li>
            <li>
                <label>下拉框(多选)</label>
                <select name="select2" multiple="multiple">
                    <option value="1">第1项</option>
                    <option value="2">第2项</option>
                    <option value="3">第3项</option>
                </select>
            </li>
            <li>
                <label>多行文本框</label>
                <textarea rows="" cols="" name="textarea"></textarea>
            </li>
        </ol>
    </form>
</div>
<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
<script>
    var form = TinyForm('#form', {
        checkbox: ['选中', '未选中']
    });

    QUnit.test("设置文本框的值", function (assert) {
        var expected = 'textboxvalue';
        form.setData(expected, 'text');
        assert.equal(form.getData('text'), expected, "文本框的值=textboxvalue");
    });

    QUnit.test('设置radio的值1', function (assert) {
        var expected = 'radio1';
        form.setData(expected, 'radio');
        assert.equal(form.getData('radio'), expected, "设置radio的值=radio1");
    });

    QUnit.test('设置radio的值2', function (assert) {
        var expected = 'radio2';
        form.setData(expected, 'radio');
        assert.equal(form.getData('radio'), expected, "设置radio的值=radio2");
    });

    QUnit.test('获取checkbox的值', function (assert) {
        var expected = '未选中';
        assert.equal(form.getData('checkbox'), expected, "获取checkbox的值=未选中");
    });

    QUnit.test('设置checkbox的值', function (assert) {
        var expected = '选中';
        form.setData(expected, 'checkbox');
        assert.equal(form.getData('checkbox'), expected, "设置checkbox的值=选中");
    });

    QUnit.test('获取自定义checkbox的值', function (assert) {
        var expected = 'no';
        assert.equal(form.getData('checkbox-custom'), expected, "获取checkbox的值=no");
    });

    QUnit.test('设置自定义checkbox的值', function (assert) {
        var expected = 'yes';
        form.setData(expected, 'checkbox-custom');
        assert.equal(form.getData('checkbox-custom'), expected, "设置checkbox的值=yes");
    });

    QUnit.test('设置下拉框(单选)的值', function (assert) {
        var expected = 2;
        form.setData(expected, 'select1');
        assert.equal(form.getData('select1'), expected, "设置下拉框(单选)的值=2");
    });

    QUnit.test('设置下拉框(多选)的值', function (assert) {
        var expected = ["1", "3"];
        form.setData(expected, 'select2');
        assert.deepEqual(form.getData('select2'), expected, "设置下拉框(多选)的值=[1, 3]");
    });

    QUnit.test("设置多行文本框的值", function (assert) {
        var expected = 'textareavalue';
        form.setData(expected, 'textarea');
        assert.equal(form.getData('textarea'), expected, "设置多行文本框的值=textareavalue");
    });

    setTimeout(function(){
        // 可能因为测试代码执行时机的问题，这部分项放到 setTimeout 之外可能会导致无法获取到改变的字段
        QUnit.test("获取改变的字段", function (assert) {
            var expected = {
                "checkbox": "选中",
                "checkbox-custom": "yes",
                "radio": "radio2",
                "select1": "2",
                "select2": [
                    "1",
                    "3"
                ],
                "text": "textboxvalue",
                "textarea": "textareavalue"
            };
            
            assert.deepEqual(form.getChanges(), expected, "获取改变的字段=" + JSON.stringify(expected));
        });

        QUnit.test('重置表单', function (assert) {
            var expected = {
                "text": "",
                "radio": '',
                "checkbox": "未选中",
                "checkbox-custom": "no",
                "select1": "1",
                "select2": [],
                "textarea": ""
            };
            form.reset();
            assert.deepEqual(form.getData(), expected, "重置表单");
            assert.deepEqual(form.getChanges(), false, "重置后获取改变的字段=false");
        });
    }, 0);
</script>
</body>

</html>